<template>
  <el-form-item label="标题高度">
    <el-input-number placeholder="请输入标题高度" controls-position="right"
      v-model.number="optionModel.labelHeight"></el-input-number>
    <el-tooltip class="item" effect="dark" content="标题标题高度，单位:px;默认高度为 100%" placement="top">
      <i class="el-icon-question questionIcon"></i>
    </el-tooltip>
  </el-form-item>
  <el-form-item label="标题大小">
    <el-input-number placeholder="请输入字体大小" controls-position="right"
      v-model.number="optionModel.fontSize"></el-input-number>
    <el-tooltip class="item" effect="dark" content="标题文字大小，单位:px，设置为0的时候，跟随全部设置" placement="top">
      <i class="el-icon-question questionIcon"></i>
    </el-tooltip>
  </el-form-item>
  <el-form-item label="标题背景色">
    <el-input v-model="optionModel.labelBackgroundColor" clearable placeholder="标题背景色" size="small"
      class="border-width border-color">
      <template #append>
        <el-color-picker size="small" v-model="optionModel.labelBackgroundColor" :predefine="predefineColors">
        </el-color-picker>
      </template>
    </el-input>
  </el-form-item>
  <el-form-item label="标题字体">
    <el-select v-model="optionModel.fontFamily" clearable filterable>
      <el-option v-for="item in fontFamilyList" :style="{ fontFamily: item.value }" :key="item.value"
        :label="item.label" :value="item.value"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="标题颜色">
    <el-color-picker :predefine="predefineColors" v-model="optionModel.fontColor"></el-color-picker>
  </el-form-item>
  <el-form-item label="标题是否加粗">
    <el-switch v-model="optionModel.fontBlod"></el-switch>
  </el-form-item>
  <el-form-item :label="i18nt('designer.setting.showBlankRow')">
    <el-switch v-model="optionModel.showBlankRow"></el-switch>
  </el-form-item>
  <el-form-item label="是否单行占满" v-if="optionModel.hasOwnProperty('isRowWidth100')">
    <el-switch v-model="optionModel.isRowWidth100"></el-switch>
  </el-form-item>
  <el-form-item label="批量添加" v-if="optionModel.hasOwnProperty('isBatchPadding')">
    <el-switch v-model="optionModel.isBatchPadding"></el-switch>
  </el-form-item>
</template>

<script>
import i18n from "@/utils/i18n"

export default {
  name: "showBlankRow-editor",
  mixins: [i18n],
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },
  data() {
    return {
      predefineColors: [
        "#000000",
        "#ff0000",
        "#ff8c00",
        "#ffd700",
        "#90ee90",
        "#00ced1",
        "#1e90ff",
        "#c71585",
        "#c7158577",
      ],
      fontFamilyList: [
        {
          label: "微软雅黑",
          value: "Microsoft YaHei"
        },
        {
          label: "仿宋_GB2312",
          value: "FangSong"
        },
        {
          label: "仿宋",
          value: "仿宋"
        },
        {
          label: "宋体",
          value: "SimSun"
        },
        {
          label: "方正小标宋简体",
          value: "方正小标宋简体"
        },
        {
          label: "方正小标宋_GBK",
          value: "方正小标宋_GBK"
        },
        {
          label: "楷体_GB2312",
          value: "楷体_GB2312"
        },
        {
          label: "等线",
          value: "等线"
        },
        {
          label: "黑体",
          value: "黑体"
        },
        {
          label: "arial",
          value: "Arial"
        },
        {
          label: "CALIBRI",
          value: "Calibri"
        },
        {
          label: "Cambria",
          value: "Cambria"
        },
        {
          label: "cour",
          value: "Courier New"
        },
        {
          label: "symbol",
          value: "Symbol"
        },
        {
          label: "times",
          value: "Times New Roman"
        },
        {
          label: "wingding",
          value: "Wingdings"
        },
      ],
    }
  }
}
</script>

<style scoped></style>
